<template>
    <div class="m-spellingitem" @click="toSpellingDetail(spelling.id)">
        <img :src="spelling.Cover" alt="">
        <p>{{spelling.ProjectName}}</p>
        <div class="m-price">
            <span>&yen;{{spelling.OriginalPrice}}</span>
            <em>拼价&yen;{{spelling.Price}}</em>
        </div>
    </div>
</template>
<script>
export default {
    name:'',
    props:['spelling'],
    data () {
        return {
            base_url:process.env.API_HOST,
        }
    },
    methods: {
        toSpellingDetail(id) {
            this.$router.push({name:'spellingDetail',query:{id:id}});
        }
    },
    mounted() {
    }
}
</script>
<style lang="less" scoped>
.m-spellingitem{
    background: white;
    padding: 0 .6rem;
    img{
        width: 100%;
        margin-left: -.6rem;
        margin-right: -.6rem;
    }
    .m-price{
        .flex;
        justify-content: space-between;
        border-top: 1px solid @background-gray;
        line-height: 2rem;
        margin-top: .4rem;
        span{
            color: @primary-red;
        }
        em{
            color: @light-gray;
            font-size: .7rem;
        }
    }
}

</style>
